<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>学生管理系统</title>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap/css/bootstrap.min.css">
    <script src="../js/bootStrapjs/bootstrap.min.js"></script>

    <style>
        td {
            vertical-align: middle !important;
        }
    </style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h1 class="text-center">学生管理系统</h1>
        </div>
    </div>
    <div class="row ">
        <div class="col">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addBox">新增</button>
        </div>
        <div class="col">
            <form class="form-inline">
                <div class="form-group">
                    <label for="userName">用户名：</label>
                    <input type="text" id="userName" class="form-control mx-sm-3">
                </div>
                <div class="form-group">
                    <label for="userName">所属班级：</label>
                    <select id="inputState" class="form-control">
                        <option selected value="-1">全部</option>
                        <!--<option value="1">高职软件2002</option>
                        <option value="2">高职数媒2002</option>
                        <option value="3">中职软件2102</option>-->
                    </select>
                </div>
                <div class="form-group">
                    <div class="col">
                        <button type="button" class="btn btn-primary" onclick="searchList()">搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <table class="table table-hover text-center">
                <thead>
                <tr>
                    <th scope="col">编号</th>
                    <th scope="col">姓名</th>
                    <th scope="col">头像</th>
                    <th scope="col">所属班级</th>
                    <th scope="col">性别</th>
                    <th scope="col">手机号</th>
                    <th scope="col">年龄</th>
                    <th scope="col">家庭住址</th>
                    <th scope="col">状态</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end" id="pageBox">
                    <li class="page-item ">
                        <a class="page-link" href="#" tabindex="-1">首页</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>

        </div>
    </div>
    <div class="row">
        <div class="col">
            <!-- Modal -->
            <div class="modal fade" id="addBox" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
                 aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="saveUser">Save changes</button>
                        </div>
                    </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</div>
</body>
</html>
<script>
    //页面加载
    //1.获取全部班级列表
    let classUrl = '/stu_sys/class.action';
    let data = {opr: 'list'}
    $.ajax({
        "url": classUrl,
        'type': 'get',
        'data': data,
        'dataType': 'json',
        'success': classList,
        'error': function () {
            alert("查询失败！请联系管理员")
        }
    })

    //回调成功，加载数据
    function classList(data) {
        console.log(data);
        data.forEach(dd => {
            $('#inputState').append(`<option value="` + dd.id + `">` + dd.className + `</option>`);
        })
    }

    //2.分页展示数据
    function onloadData(){
        let stuUrl = '/stu_sys/stu.action';
        let opr = 'list';
        let stuName = $('#userName').val();
        let classId = $('#inputState').val();
        let pageNum = 1;
        let stuData = {opr, stuName, classId, pageNum};
        $.ajax({
            'url': stuUrl,
            'type': 'post',
            'data': stuData,
            'dataType': 'json',
            'success': stuPageList,
            'error': function () {
                alert("加载失败！请联系管理员")
            }
        })
    }
    //页面加载时调用
    window.onload =onloadData();




    function stuPageList(data) {
        console.log(data);
        //console.log("分页数据结果集", data.dataList);
        //清空内容
        $('tbody').empty();
        //table数据
        if(data.dataList!=null){
            data.dataList.forEach(dd=>{
                let imgPath = '../images/1.png';
                if(dd.imgPath!=""){
                    imgPath = dd.imgPath;
                }
                let state = '禁用';
                if(dd.state=='0'){
                    state = '启用';
                }
                $('tbody').append(`<tr>
                    <td>`+dd.id+`</td>
                    <td>`+dd.userName+`</td>
                    <td>
                        <img src="`+imgPath+`" width="100" height="60" class="rounded mx-auto d-block" alt="...">
                    </td>
                    <td>`+dd.className+`</td>
                    <td>`+dd.sex+`</td>
                    <td>`+dd.phone+`</td>
                    <td>`+dd.age+`</td>
                    <td>`+dd.address+`</td>
                    <td>`+state+`</td>
                    <td>
                        <button type="button" class="btn btn-info btn-sm">详情</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>

                    </td>
                </tr>`);
            })
        }
        /*//分页数据
        //获取总页数
        let countPage = data.countPage;
        let pageNum = data.pageNum;
        for (let i = 0; i < countPage; i++) {
            $('#pageBox').append()
        }*/


    }
    //点击搜索时调用
    function searchList() {
        onloadData();
    }

    $("#saveUser").click(function () {
        //添加属性
        $(this).attr('data-dismiss','modal');
        //重新加载页面
        location.reload();
    })

</script>